{% extends "base.html" %}

{% load static %}
{% block title %}客户详情{% endblock %}

{% block headjs %}
<style>
  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #f0f0f0;
      line-height: 30px;
    height: 30px;
  }
  .marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
</style>
{% endblock %}
{% block content %}
    <div class="row">
    <div class="col-lg">
        <div class="card">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col">
                        客户ID：{{ khxq.id }} - 客户姓名：{{ khxq.username }} |
                        {% if messages %}
                        <p class="error">{% for message in messages %}{{ error_message }}{% endfor %}</p>
                    {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-3">
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                             aria-orientation="vertical">
                            <a class="nav-link active show" id="v-pills-home-tab" data-toggle="pill"
                               href="#v-pills-home"
                               role="tab" aria-controls="v-pills-home" aria-selected="true">个人信息</a>
                            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile"
                               role="tab" aria-controls="v-pills-profile" aria-selected="false">客户订单</a>
                            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill"
                               href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
                               aria-selected="false">客户操作</a>
                            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill"
                               href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
                               aria-selected="false">跟进记录</a>
{#                            <a class="nav-link" id="v-pills-xiangqing-tab" data-toggle="pill"#}
{#                               href="#v-pills-xiangqing" role="tab" aria-controls="v-pills-xiangqing"#}
{#                               aria-selected="false">客户资料</a>#}
                            {% if jiaowulog %}

                                <a class="nav-link" id="v-pills-jiaowulog-tab" data-toggle="pill"
                                   href="#v-pills-jiaowulog" role="tab" aria-controls="v-pills-xiangqing"
                                   aria-selected="false">教务跟进记录</a>
                            {% endif %}

                        </div>
                    </div>
                    <div class="col-9">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade active show" id="v-pills-home" role="tabpanel"
                                 aria-labelledby="v-pills-home-tab">{#客户基本信息展示  #}
                                <div class="container">
                                    <div class="row">
                                        <table class="table ">
                                            <tr>
                                                <td>姓名</td>
                                                <td>{{ khxq.username }}</td>
                                                <td>联系人</td>
                                                <td>{{ khxq.name }}</td>
                                                <td>联系电话</td>
                                                <td>{{ khxq.tel }}</td>
                                                <td>咨询时间</td>
                                                <td>{{ khxq.zixuntime }}</td>
                                                <input type="hidden" id="customer-id" value="{{ customer.id }}">
                                            </tr>
                                            <tr>
                                                {% include "kehu_zhuangtai.html" %}
                                            </tr>
                                            <tr>

                                                <td>录入时间</td>
                                                <td>{{ khxq.addtime }}</td>
                                                <td>当前归属</td>
                                                <td>{{ khxq.admin_user.last_name }}{{ khxq.admin_user.first_name }}</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>

                                            </tr>
                                            <tr>
                                                <td colspan="8" width="576">备注：{{ khxq.beizhu }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <button type="button" class="btn btn-primary btn-edit-customer1"
                                                id="btn-edit-customer1" data-toggle="modal"
                                                data-target="#updateCustomerModal">更新客户资料
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-profile">{#客户订单信息#}
                                <div class="row mb-2">
                                    <div class="col-sm"><a class="btn btn-danger"
                                                           href="{% url 'kehu_add_dd' khxq.id %}">新增订单</a></div>
                                    <div class="col-sm" id="message"></div>
                                </div>


                                <div class="row">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <td>序号</td>
                                            <td>订单号</td>
                                            <td>客户姓名</td>
                                            <td>订单时间</td>
                                            <td>订单归属</td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        {% for dingdan in kehudingdans %}
                                            <tr>
                                                <td>{{ dingdan.id }}</td>
                                                <td>{{ dingdan.ddh }}</td>
                                                <td>{{ khxq.username }}</td>
                                                <td>{{ dingdan.ddtime }}</td>
                                                <td>{{ dingdan.dduser.last_name }}{{ dingdan.dduser.first_name }}</td>
                                                {% include 'kehudetail_dd_detail.html' %}
                                            </tr>

                                        {% endfor %}
                                    </table>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
                                 aria-labelledby="v-pills-messages-tab">{#客户进班信息#}
                                <div class="card">
                                    <div class="card-body">

                                        <button type="button" class="btn btn-primary p-3"> 放弃</button>
                                        <button type="button" class="btn btn-secondary p-3"> 静默</button>
                                        <button type="button" class="btn btn-success p-3"> Success</button>

                                    </div>

                                </div>

                            </div>
                            <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
                                 aria-labelledby="v-pills-settings-tab">
                                <div class="row-lg">
                                    <div class="card p-2">
                                        <h2 class="mb-2 p-3">跟进记录</h2>
                                        <div class="card-body" style="max-height: 350px ;overflow-y: auto;">
                                            <ul class="card-body list-group ">
                                                {% for genjinlog in genjinlogs %}
                                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                                        {% if genjinlog.get_genjinleixing_display == '提醒' %}
                                                            <span><i class="icon-clock text-danger"></i>
                                                {{ genjinlog.get_genjinleixing_display }}:</span>
                                                            <p> {{ genjinlog.genjintext|safe }}</p>

                                                        {% elif genjinlog.get_genjinleixing_display == '重要' %}

                                                            <span><i class="icon-paper-airplane text-danger"></i>
                                               {{ genjinlog.get_genjinleixing_display }}:</span>
                                                            <p class="w-50">{{ genjinlog.genjintext|safe }}</p>
                                                        {% else %}

                                                             <span><i class="icon-clock text-primary icon-paper-airplane"></i>
                                                {{ genjinlog.get_genjinleixing_display }}:</span>
                                                            <p> {{ genjinlog.genjintext|safe }}</p>


                                                        {% endif %}

                                                        <span class="float-right"><span
                                                                class="badge badge-primary badge-pill mr-5">{{ genjinlog.genjintime }}</span>
                                                            {% if is_admin %}
                                                                <a class="badge badge-primary badge-pill"
                                                                   href="{% url 'genjinlogs_delete' pk=genjinlog.id %}">删除</a>
                                                            {% else %}
                                                            {% endif %}

                                            </span>
                                                    </li>
                                                {% endfor %}

                                            </ul>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                            data-target="#staticBackdropgjjl">
                                        添加跟进记录
                                    </button>

                                    <!-- Modal -->
                                    <div class="modal fade" id="staticBackdropgjjl" data-backdrop="static"
                                         data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropgjjl"
                                         aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="staticBackdropLabel">添加跟进记录</h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <form method="post" action="{% url 'Kehu_detail' pk=object.id %}">
                                                    {% csrf_token %}
                                                    <div class="modal-body">
                                                        {{ genjinlog_form.as_p }}
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">取消
                                                        </button>
                                                        <button type="submit" name="form_key" value="genjinlog"
                                                                class="btn btn-primary">保存
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
{#                            <div class="tab-pane fade" id="v-pills-xiangqing" role="tabpanel"#}
{#                                 aria-labelledby="v-pills-xiangqing-tab">#}
{##}
{#                                <div class="card">#}
{#                                    <div class="card-header">#}
{#                                           客户当前资料：#}
{#                                    </div>#}
{#                                    {% for kehuzilao in kehuziliaos %}#}
{#                                        <img src="{{ kehuzilao.fujian }}" alt="" style="width: 200px;">#}
{#                                        <ul class="card-body list-group">#}
{#                                            <li class="list-group-item">证件号：{{ kehuzilao.hujizhenghao }}</li>#}
{#                                            <li class="list-group-item">户籍类型：{{ kehuzilao.get_hujileixing_display }}</li>#}
{#                                            <li class="list-group-item">附件：{{ kehuzilao.fujian }}</li>#}
{#                                        </ul>#}
{#                                    {% endfor %}#}
{#                                    <div class="card-header">客户资料上传</div>#}
{#                                    <div class="card-body">#}
{#                                        <!-- 客户资料表单 -->#}
{#                                        <form method="post" class="form form-group" action="{% url 'Kehu_detail' pk=object.id %}" enctype="multipart/form-data">#}
{#                                            {% csrf_token %}#}
{#                                            <div class="form-group">#}
{#                                            <label for="customerName">{{ KeHuzilao_Form.label_tag }}</label>#}
{#                                             {{ KeHuzilao_Form }}#}
{#                                            </div>#}
{#                                            <button type="submit" name="form_key" value="ziliao">保存</button>#}
{##}
{#                                        </form>#}
{#                                    </div>#}
{##}
{##}
{#                                </div>#}
{#                            </div>#}
                            {% if jiaowulog %}
                                <div class="tab-pane fade" id="v-pills-jiaowulog">{#教务更近log#}
                                <div class="mb-2">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">教务更近log</h5>
                                        </div>
                                        <div class="card-body">
                                            <ul class="list-group">
                                                {% for log in jiaowulog %}
                                                    <li class="list-group-item  ">
                                                        <span class="badge badge-primary badge-pill">{{ log.gengjin_time }}</span>
                                                        <p>
                                                            跟进人：{{ log.addlog_user.last_name }}{{ log.addlog_user.first_name }}</p>
                                                        <p>{{ log.gengjin_content|safe }}</p>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            {% endif %}
                            </div>
                        </div>
                    </div>
                    {#               修改客户资料模态框 #}
                    <!-- 模态框HTML结构 -->
                    <!-- Modal HTML -->
                    <div class="modal fade" id="updateCustomerModal" tabindex="-1" role="dialog"
                         aria-labelledby="updateCustomerModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="updateCustomerModalLabel">更新客户资料</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <!-- Modal body content -->
                                    <form id="updateCustomerForm">
                                        <div class="alert alert-success fade" role="alert" id="message"></div>
                                        {% csrf_token %}
                                        {% if field.errors %}

                                        {% endif %}
                                        {% for KeHuedui in KeHu_Form %}
                                            <div class="form-group">
                                                <label for="customerName">{{ KeHuedui.label_tag }}</label>
                                                {{ KeHuedui }}

                                            </div>
                                        {% endfor %}

                                        <!-- 其他表单字段... -->
                                    </form>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="updateCustomerConfirmButton">
                                        确定修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-12">
                            <div class="marquee">
  <p>客户资料已经迁移到学员管理 只有当学员报名后才可会有资料上传</p>
</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
{% endblock %}
{% block footerjs %}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // 获取 URL 中的锚点部分
            var hash = window.location.hash;
            // 检查是否指定了有效的标签页 ID（去掉前面的 # 号）
            if (hash && hash.startsWith("#")) {
                var tabToShow = hash.substring(1); // 去掉 # 号
                $('a[href="#' + tabToShow + '"]').tab('show');
            }

        });

        window.onload = function () {
            var currentDateTime = new Date();
            var formattedDateTime = currentDateTime.toISOString().slice(0, 16);
            var datetimeLocalInputs = document.querySelectorAll('input[type="datetime-local"]');
            datetimeLocalInputs.forEach(function (input) {
                input.value = formattedDateTime;
            });
        };

    </script>

    <script>

        $(document).ready(function () {
            // 绑定点击事件到更新按钮
            $('#updateCustomerButton').click(function () {
                // 清空模态框中的表单字段（如果有的话）
                $('#updateCustomerForm')[0].reset();
                // 显示模态框
                $('#updateCustomerModal').modal('show');
            });
            $('#mySmallModalLabelkhgz').click(function () {
                // 清空模态框中的表单字段（如果有的话）
                $('#updateCustomerFormx')[0].reset();
                // 显示模态框
                $('#mySmallModalLabelkhgzm').modal('show');
            });
            $('#mySmallModalLabelyouxiaoif').click(function () {
                $('#updateCustomerFormx')[0].reset(); // 重置第一个表单
                $('#mySmallModalLabelyouxiaoifm').modal('show'); // 显示第一个模态框
            });
            $('#mySmallModalLabelyxd').click(function () {
                $('#updateCustomerFormx')[0].reset(); // 假设有第二个表单，并重置
                $('#mySmallModalLabelyxdm').modal('show'); // 显示第二个模态框
            });
            // 绑定点击事件到模态框中的“Update”按钮
            $('#updateCustomerConfirmButton').click(function (event) {
                event.preventDefault();
                // 阻止默认的提交行为（因为我们在AJAX中提交表单）
                event.preventDefault();
                // 获取表单数据并构建更新对象
                var formData = $('#updateCustomerForm').serializeArray();
                var updateData = {};
                $.each(formData, function (index, field) {
                    updateData[field.name] = field.value;
                });
                // 添加CSRF令牌（确保你的Django视图需要CSRF保护）
                updateData['csrfmiddlewaretoken'] = $('input[name=csrfmiddlewaretoken]').val();
                // 发送POST请求发送POST请求更新客户资料
                $.ajax({
                    url: '/kehu/' + {{ khxq.id }} +'/update/', // 确保此处的customer.id能正确替换
                    type: 'POST',
                    data: updateData,
                    success: function (response) {
                        // 在这里处理响应结果
                        if (response.status === 'success') {
                            $('#message').html(response.message).removeClass('fade').addClass('show');
                            // 成功提示并关闭模态框
                            setTimeout(function () {
                                $('#message').alert('close');
                            }, 4000);
                            setTimeout(() => {
                                $('#updateCustomerModal').modal('hide');
                            }, 3000);
                            // 刷新页面
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 在这里处理请求错误
                        console.error("请求失败: " + error);
                        // 在 #message div 中显示错误消息
                        $('#message').html("请求失败: " + error);
                    }


                });
            });
            //
            $('#updateCustomerConfirmButtona').click(function (event) {
                event.preventDefault();
                // 阻止默认的提交行为（因为我们在AJAX中提交表单）
                event.preventDefault();
                // 获取表单数据并构建更新对象
                var formData = $('#updateCustomerFormguanzhu').serializeArray();
                var updateData = {};
                $.each(formData, function (index, field) {
                    updateData[field.name] = field.value;
                });
                // 添加CSRF令牌（确保你的Django视图需要CSRF保护）
                updateData['csrfmiddlewaretoken'] = $('input[name=csrfmiddlewaretoken]').val();
                updateData['kehu'] = {{ khxq.id }};
                // 发送POST请求发送POST请求更新客户资料
                $.ajax({
                    url: '{% url 'kehu_zt_update' pk=khxq.id %}', // 确保此处的customer.id能正确替换
                    type: 'POST',
                    data: updateData,
                    success: function (response) {
                        // 在这里处理响应结果
                        if (response.status === 'success') {
                            $('#message').html(response.message).removeClass('fade').addClass('show');
                            // 成功提示并关闭模态框
                            setTimeout(() => {
                                $('#message').alert('close');
                                $('#mySmallModalLabelkhgzm').modal('hide');
                            }, 8000);
                            // 刷新页面
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 在这里处理请求错误
                        console.error("请求失败: " + error);
                        // 在 #message div 中显示错误消息
                        $('#message').html("请求失败: " + error);
                    }
                });
            });
            //
            $('#updateCustomerConfirmButtonb').click(function (event) {
                event.preventDefault();
                // 阻止默认的提交行为（因为我们在AJAX中提交表单）
                event.preventDefault();
                // 获取表单数据并构建更新对象
                var formData = $('#updateCustomerFormyouxiao').serializeArray();
                var updateData = {};
                $.each(formData, function (index, field) {
                    updateData[field.name] = field.value;
                });
                // 添加CSRF令牌（确保你的Django视图需要CSRF保护）
                updateData['csrfmiddlewaretoken'] = $('input[name=csrfmiddlewaretoken]').val();
                updateData['kehu'] = {{ khxq.id }};
                // 发送POST请求发送POST请求更新客户资料
                $.ajax({
                    url: '/' + {{ khxq.id }} +'/ztupdate/', // 确保此处的customer.id能正确替换
                    type: 'POST',
                    data: updateData,
                    success: function (response) {
                        // 在这里处理响应结果
                        if (response.status === 'success') {
                            $('#message').html(response.message).removeClass('fade').addClass('show');
                            // 成功提示并关闭模态框
                            setTimeout(function () {
                                $('#message').alert('close');
                                $('#updateCustomerModal').modal('hide');
                            }, 4000);

                            // 刷新页面
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 在这里处理请求错误
                        console.error("请求失败: " + error);
                        // 在 #message div 中显示错误消息
                        $('#message').html("请求失败: " + error);
                    }


                });
            });
            //
            $('#updateCustomerConfirmButtonc').click(function (event) {
                event.preventDefault();
                // 阻止默认的提交行为（因为我们在AJAX中提交表单）
                event.preventDefault();
                // 获取表单数据并构建更新对象
                var formData = $('#updateCustomerFormyixiangdu').serializeArray();
                var updateData = {};
                $.each(formData, function (index, field) {
                    updateData[field.name] = field.value;
                });
                // 添加CSRF令牌（确保你的Django视图需要CSRF保护）
                updateData['csrfmiddlewaretoken'] = $('input[name=csrfmiddlewaretoken]').val();
                updateData['kehu'] = {{ khxq.id }};
                // 发送POST请求发送POST请求更新客户资料
                $.ajax({
                    url: '/' + {{ khxq.id }} +'/ztupdate/',
                    type: 'POST',
                    data: updateData,
                    success: function (response) {
                        // 在这里处理响应结果
                        if (response.status === 'success') {
                            $('#message').html(response.message).removeClass('fade').addClass('show');
                            // 成功提示并关闭模态框
                            setTimeout(function () {
                                $('#message').alert('close');
                                $('#updateCustomerModal').modal('hide');
                            }, 2000);
                            // 刷新页面
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 在这里处理请求错误
                        console.error("请求失败: " + error);
                        // 在 #message div 中显示错误消息
                        $('#message').html("请求失败: " + error);
                    }


                });
            });


            //根据客户先择产品分类 重写产品


        });
    </script>

{% endblock %}